<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
	<script type="text/babel">
      //1.创建类式组件
      class MyComponent1 extends React.Component{
        render(){
          //render是放在- MyComponent1的原型对象上，供实例使用
          //render中的this- MyComponent1的实例对象<=>MyComponent1组件实例对象
          console.log(`render中的this：`,this);
          return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
        }
      }
      //2.渲染组件到页面
      ReactDOM.render(<MyComponent1/>,document.getElementById('example'))

      /*
      执行了ReactDOM.render(<MyComponent1/>....之后，
        1.React解析组件标签，找到了MyComponent1组件。
        2.发现组件是使用类定义，随后new出该类的实例，并通过该实例调用到原型上的render()方法。
        3.将返回的虚拟DOM转为真实DOM，随后呈现在页面中
      */

	</script>
  </body>
</html>
